<template>
    <div>
        <el-row type="flex" justify="end" class="header toolbar">
            <el-col :span="2" class="header-btn">
                <el-button type="primary" @click="addNode">添加</el-button>
            </el-col>
        </el-row>
        <!-- 表格开始  -->
        <el-table
                stripe
                ref="multipleTable"
                :data="rulesList"
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="规则名称">
                <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column
                    label="规则描述">
                <template slot-scope="scope">{{ scope.row.title }}</template>
            </el-table-column>
            <el-table-column
                    prop="ismenu"
                    label="是否为菜单">
                <template slot-scope="scope">{{ scope.row.ismenu ? '是': '否' }}</template>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态">
                <template slot-scope="scope">{{ scope.row.status ? '启用': '禁用' }}</template>
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="说明">
                <template slot-scope="scope">{{ scope.row.remark}}</template>
            </el-table-column>
            <el-table-column
                    prop="create_time"
                    label="添加时间">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="info" size="mini" @click="editRules(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="delRules(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 页码 -->
        <el-col :span="24" class="toolbar">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>

        <!--   添加节点dialog     -->
        <el-dialog
                title="添加节点"
                :visible.sync="addDialogVisible"
                width="50%"
                @close="addClose">
            <el-form :model="addRuleForm" :rules="rules" ref="addRuleForm" label-width="100px">
                <el-form-item label="规则名称" prop="name">
                    <el-input v-model="addRuleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="规则描述" prop="title">
                    <el-input v-model="addRuleForm.title"></el-input>
                </el-form-item>
                <el-form-item label="额外条件">
                    <el-input v-model="addRuleForm.condition"></el-input>
                </el-form-item>
                <el-form-item label="父节点">
                    <el-select v-model="addRuleForm.pid" placeholder="选择父节点">
                        <el-option
                                v-for="item in ruleList"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否菜单">
                    <el-select v-model="addRuleForm.ismenu" placeholder="请选择">
                        <el-option
                                v-for="item in menus"
                                :key="item.key"
                                :label="item.key"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否禁用">
                    <el-select v-model="addRuleForm.status" placeholder="请选择">
                        <el-option
                                v-for="item in status"
                                :key="item.key"
                                :label="item.key"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="addRuleForm.remark" style="width: 80%"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="addClose">取 消</el-button>
                <el-button type="primary" @click="addSure">确 定</el-button>
            </span>
        </el-dialog>

        <!--   编辑节点dialog     -->
        <el-dialog
                title="添加节点"
                :visible.sync="editDialogVisible"
                width="50%"
                @close="editClose">
            <el-form :model="editRuleForm" :rules="rules" ref="editRuleForm" label-width="100px">
                <el-form-item label="规则名称" prop="name">
                    <el-input v-model="editRuleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="规则描述" prop="title">
                    <el-input v-model="editRuleForm.title"></el-input>
                </el-form-item>
                <el-form-item label="额外条件">
                    <el-input v-model="editRuleForm.condition"></el-input>
                </el-form-item>
                <el-form-item label="父节点">
                    <el-select v-model="editRuleForm.pid" placeholder="选择父节点">
                        <el-option
                                v-for="item in ruleList"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否菜单">
                    <el-select v-model="editRuleForm.ismenu" placeholder="请选择">
                        <el-option
                                v-for="item in menus"
                                :key="item.key"
                                :label="item.key"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否禁用">
                    <el-select v-model="editRuleForm.status" placeholder="请选择">
                        <el-option
                                v-for="item in status"
                                :key="item.key"
                                :label="item.key"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="editRuleForm.remark" style="width: 80%"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="editClose">取 消</el-button>
                <el-button type="primary" @click="editSure">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { rulesList, addRules, editRules, delRulesInfo } from '../../api/userAPI'
    export default {
        name: "Node",
        data() {
            return {
                tableData: [],
                // status: '',
                // keyword: '',
                rulesList: [],
                total: 0,
                pageSize: 10, // 每页显示条目个数
                pageSizes: [10, 20, 30, 40], // 每页显示个数选择器的选项设置
                currentPage: 1, // 当前页数
                addDialogVisible: false,
                addRuleForm: {
                    name: '',
                    title: '',
                    condition: '',
                    remark: '',
                    ismenu: '',
                    status: '',
                    pid: '',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入规则名称', trigger: 'blur' },
                    ],
                    title: [
                        { required: true, message: '请输入规则描述', trigger: 'blur' },
                    ]
                },
                menus: [
                    {
                        key: '是',
                        value: 1
                    },
                    {
                        key: '否',
                        value: 0
                    }
                ],
                status: [
                    {
                        key: '启用',
                        value: 1
                    },
                    {
                        key: '禁用',
                        value: 0
                    }
                ],
                editDialogVisible: false,
                editRuleForm: {},
                editRuleFormCopy: {},
                ruleList: []
            }
        },
        created() {
            this._rulesList() // 获取后台规则列表
        },
        methods: {
            _rulesList() {
                let data = {p: this.currentPage, length: this.pageSize}
                rulesList(data).then(res => {
                    console.log(res)
                    this.rulesList = res.data.list
                    this.total = res.data.total
                }).catch(err => {
                    this.$message.error(err.response.data.message)
                })
            },
            editRules(index, row) {
                console.log(row)
                this.editDialogVisible = true
                this.editRuleForm = row
                this.editRuleFormCopy = { ...this.editRuleForm }
                this.ruleListNode()
            },
            delRules(index, row) {
                console.log(row)
                this.$confirm('确认删除该规则吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    let data = {ids: [row.id],delete: 1}
                    delRulesInfo(data).then(res => {
                        this.$message.success('删除成功')
                        this._rulesList() // 获取后台规则列表
                    }).catch(err => {
                        this.$message.error(err.response.data.message)
                    })
                }).catch(() => {
                    this.$message.info('已取消')
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`)
                // 改变每页显示的条数
                this.pageSize = val
                this._rulesList() // 获取后台规则列表
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage = 1
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`)
                this.currentPage = val
                this._rulesList() // 获取后台规则列表
            },
            addNode() {
                this.addDialogVisible = true
                this.ruleListNode()
            },
            ruleListNode() {
                let data = {ismenu: 1}
                rulesList(data).then(res => {
                    console.log(res)
                    this.ruleList = res.data.list
                }).catch(err => {
                    this.$message.error(err.response.data.message)
                })
            },
            addClose() {
                this.addDialogVisible = false
                this.$refs.addRuleForm.resetFields()
                for (let k in this.addRuleForm) {
                    this.addRuleForm[k] = ''
                }
            },
            addSure() {
                this.$refs.addRuleForm.validate( (valid) => {
                    if (!valid) return false
                    console.log(this.addRuleForm)
                    addRules(this.addRuleForm).then(res => {
                        this.$message.success('添加成功')
                        this.addDialogVisible = false
                        this._rulesList() // 获取后台规则列表
                    }).catch(err => {
                        this.$message.error(err.response.data.message)
                    })
                })
            },
            editClose() {
                this.$refs.editRuleForm.resetFields()
                this.editDialogVisible = false
                this.editRuleForm.condition = this.editRuleFormCopy.condition
                this.editRuleForm.remark = this.editRuleFormCopy.remark
                this.editRuleForm.ismenu = this.editRuleFormCopy.ismenu
                this.editRuleForm.status = this.editRuleFormCopy.status
                this.editRuleForm.pid = this.editRuleFormCopy.pid
            },
            editSure() {
                this.$refs.editRuleForm.validate( (valid) => {
                    if (!valid) return false
                    delete this.editRuleForm.create_time
                    // console.log(this.editRuleForm)
                    editRules(this.editRuleForm).then(res => {
                        this.$message.success('修改成功')
                        this.editDialogVisible = false
                        this._rulesList() // 获取后台规则列表
                    }).catch(err => {
                        this.$message.error(err.response.data.message)
                    })
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-input,.el-select {
        width: 80%;
    }
</style>
